<template>
	<view class="page-content">		
		<!--start 顶部图片-title设置 -->
		<view class="page-suspension">
			<view  :class="className">
				<view class="top_bgimg" :style="'height:'+topBarHeight+'px;'">
					<view class="top_cont" :style="'height:'+ tabBarHeight+'px;margin-top:'+stateBarHeight+'px;'">
						<image src="https://web.suqzp.com/public/jiantou2.png" mode="aspectFit"  @click="gotoBack" class="back-pre"></image><!-- 这里是返回箭头 -->
						<text class="fc-ff" style="left: 45%;position:absolute;">{{navbarData.title}}</text>
					</view>
				</view>
			</view>
			<image class="page-suspension-bj" :src="hotelImgPath[0]"></image>			
			<!--end 顶部图片-title设置 -->
			<view class="main-hotel">
				<view class="jd-info">
					<view class="wrap">
						<view class="flex one-col">
							<text class="fs-36 fc-33 two-ellipsis">{{HotelDetail.hotel.hotelFullName}}</text>
							<view class="starts flex">
								<view class="flex"  v-if="HotelDetail.hotelSubStar == 1">
									<image :src="getImgUrl(imgSrc)"></image>
								</view>
								<view class="flex"  v-if="HotelDetail.hotelSubStar == 2">
									<image :src="getImgUrl(imgSrc)"></image>
									<image :src="getImgUrl(imgSrc)"></image>
								</view>
								<view class="flex"  v-if="HotelDetail.hotelSubStar == 3">
									<image :src="getImgUrl(imgSrc)"></image>
									<image :src="getImgUrl(imgSrc)"></image>
									<image :src="getImgUrl(imgSrc)"></image>
								</view>
								<view class="flex"  v-if="HotelDetail.hotelSubStar == 4">
									<image :src="getImgUrl(imgSrc)"></image>
									<image :src="getImgUrl(imgSrc)"></image>
									<image :src="getImgUrl(imgSrc)"></image>
									<image :src="getImgUrl(imgSrc)"></image>
								</view>
								<view class="flex"  v-if="HotelDetail.hotelSubStar == 5">
									<image :src="getImgUrl(imgSrc)"></image>
									<image :src="getImgUrl(imgSrc)"></image>
									<image :src="getImgUrl(imgSrc)"></image>
									<image :src="getImgUrl(imgSrc)"></image>
									<image :src="getImgUrl(imgSrc)"></image>
								</view>
							
							</view>
						</view>
						<view class="fw flex jcsb">
							<view class="flex">
								<text>{{HotelDetail.hotelSubCreateTime}}</text>
								<view v-for="(item,index) in HotelDetail.tabs" :key="index">
									<text>{{item}}</text>
								</view>
							</view>
						</view>
						<view class="two-col flex jcsb mar-top-35">
							<view class="t-c-l">
								<view class="t-c-l-top flex">
									<text class="pf fc-ff fs-28">{{HotelDetail.hotelAvgScore}}</text>
									<text class="fc-84 fs-26" v-if="HotelDetail.hotelAvgScore >= 1">一般</text>
									<text class="fc-84 fs-26" v-if="HotelDetail.hotelAvgScore >= 2">好</text>
									<text class="fc-84 fs-26" v-if="HotelDetail.hotelAvgScore >= 4">很好</text>
									<text class="fc-84 fs-26" v-if="HotelDetail.hotelAvgScore >= 5">优秀</text>
									<view class="fs-24 fc-66 mar-left-10 flex">
										共{{HotelDetail.commentCount || 0}}条 
										<!-- <image src="https://web.suqzp.com/public/back.png"></image> -->
									</view>							
								</view>
								<view class="two-ellipsis fc-33 fs-24"><!-- 环境舒适干净整洁美 --></view>
							</view>
							<view class="t-c-r flex" @click="toMap()">
								<view class="lc">
									{{HotelDetail.hotelSubCity || ""}}{{HotelDetail.hotelSubArea || ""}}{{HotelDetail.hotelSubAddress || ""}}
									<view class="fs-24 fc-66 pad-top-10"><!-- 七星岩/星湖/肇庆站 --></view>
								</view>
								<view class="lc-img">
									<image src="https://web.suqzp.com/public/static/daohang.png"></image>
									<text>导航</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="choice-bar" @click="toChoicebar">
					<view class="navTop">			
						<view class="navTopstar flex">
							<view class="navTopstar0">
								<view class="name fs-28">{{startTime}}</view>			
							</view>
							<view class="name2">周{{weekstart}}</view>
						</view>
						<view class="navTopxianview">
							<view class="navTopxianname">共{{dayCount}}晚</view>
							<view class="navTopxian"></view>
						</view>					
						<view class="navTopstar flex">
							<view class="navTopstar1">
								<view class="name fs-28">{{endTime}}</view>			
							</view>
							<view class="name2">周{{weekend}}</view>
						</view>
					</view>
				</view>
				<!-- 特价内容 -->
				<view class="specialoffer bg-ff">
					<view class="wrap">
						<view class="fc-33 fs-32 pad-top-30">平台特价房</view>
						<view class="so-wap" v-if="roomInfos.length>0">
							<view class=""  v-for="(item,index) in roomInfos" :key="index" v-if="item.publishStatus == 1" >
								<view class="items flex jcsb" @tap.stop="downDetail(item.hotelRoomId)">
									<view class="hotel-pic">
										<image :src="item.hotelRoomImgPath[0]"></image>
										<text class="anglemark">{{item.hotelRoomName}}</text>
										<text class="smallhorn fc-ff fs-24">5</text>
									</view>
									<view class="flex-1">
										<view class="flex jcsb">
											<view class="fs-32 fc-33 flex-1">{{item.hotelRoomName}}
												<!-- <text class="fc-f1a">（特价）</text> -->
											</view>
											<!-- <image :src="item.hotelRoomImgPath[0]"></image> -->
										</view>
										<view class="h-label flex pad-top-10">
											<text>{{item.tabs[0]}}</text>
											<text>{{item.hotelRoomRemark}}</text>
										</view>
										<view class="explains flex">
											<text class="tjf dis-block" v-if="item.isSpecial == 'Y'">平台特价房</text>
											<!-- <text class="fc-5c9 fs-24 mar-left-15">入住当天18:00前可免费取消</text> -->
										</view>
										<view class="flex yd-info jcsb">
											<view class="flex flex-1">
												<!-- <view class="ification flex">
													<image src="https://web.suqzp.com/public/static/queren.png"></image>
													<text class="fs-24 fc-33">即时确认</text>
												</view>
												<view class="ification flex">
													<image src="https://web.suqzp.com/public/static/xiyan.png"></image>
													<text class="fs-24 fc-33">可吸烟</text>
												</view> -->
											</view>
											<view class="flex">
												<view class="prices">
													<text class="fs-24 fc-99 line">￥{{item.price}}</text>
													<text class="fs-40 fc-dc4"><text>￥</text>{{item.promotionPrice}}</text>
													<!-- <view class="banjia">优惠8</view> -->
												</view>
												<view class="yud fs-28 fc-ff mar-left-10" 
													@tap.stop="goReserve(item.hotelRoomId,item.hotelRoomNo,item.hotelRoomName,
													item.hotelRoomRemark,item.promotionPrice,item.count,item.isUserAuth)">
													立即预定
												</view>
											</view>
										</view>
									</view>	
								</view>	
								<!-- <view class="lookall fs-32">查看全部房型（0）</view> -->
							</view>
							<view class="text-tc fc-99 fs-32" v-else style="padding:30rpx 0">暂无房间</view>										
							<!-- 房间详情弹框 -->
							<uni-popup ref="popup" type="bottom" catchtouchmove>
								<view class="mask-content">
									<!-- 轮播图 -->
									<view class="swiper-view">
										<swiper class="swiper" autoplay="true" :current="current" @change="swiperChange">
											<swiper-item v-for="(swiper, index) in roomdetail.hotelRoomImgPath" :key="index">
												<image mode="aspectFill" :src="swiper"></image>
												{{swiper}}
											</swiper-item>
										</swiper>
										<view class="dot-s">
											<view v-for="(swiper, index) in roomdetail.hotelRoomImgPath" :key="index" 
											 :class="['baner-dian', index === swiperCurrent ? 'on' : '']"></view>
										</view>
									</view>
									<!-- 内容 -->
									<view class="pad-top-30 detail-mian pad-bot-100">
										<view class="wrap">
											<view class="fs-32 fc-33 flex-1">{{roomdetail.hotelRoomName}}</view>
											<view class="details-wap">
												<view class="fs-32">房型信息</view>
												<view class="flex mar-top-30">
													<rich-text :nodes="description.replace(/\<img/gi, '<img style=max-width:100%;height:auto')" class="fs-24 fc-33">
													</rich-text>													
												</view>
											</view>
											<view class="details-wap">
												<view class="fs-32">设施信息</view>
												<view class="mar-top-30">
													<view class="d-w2 flex">
														<view class="fs-24 fc-66">便利设施</view>
														<view class="flex-1 r-text">
															<rich-text :nodes="description.replace(/\<img/gi, '<img style=max-width:100%;height:auto')" class="fs-24 fc-33">
															</rich-text>
														</view>
													</view>
													<view class="d-w2 flex">
														<view class="fs-24 fc-66">媒体科技</view>
														<view class="flex-1 r-text">
															<rich-text :nodes="description.replace(/\<img/gi, '<img style=max-width:100%;height:auto')" class="fs-24 fc-33">
															</rich-text>
														</view>
													</view>													
												</view>
											</view>
										</view>
										<view class="order-footer">
											<view class="flex jcsb foot">
												<view class="tel-box">
													<view></view>
													<view>联系电话</view>
												</view>
												<view class="prices">
													<text class="fs-24 fc-99 line">￥{{roomdetail.price}}</text>
													<text class="fs-40 fc-dc4"><text>￥</text>{{roomdetail.promotionPrice}}</text>
													<!-- <view class="banjia">优惠8</view> -->
												</view>
												<view class="sub-btn" @click="goReserve(roomdetail.hotelRoomId,roomdetail.hotelRoomNo,roomdetail.hotelRoomName,
												roomdetail.hotelRoomRemark,roomdetail.promotionPrice,roomdetail.count, roomdetail.isUserAuth)">
												预定
												</view>
											</view>
										</view>
									</view>
								</view>
							</uni-popup>							
						</view>
						<view v-else class="text-tc fc-99">暂无空房</view>
					</view>
				</view>			
				<!-- 住客评价 -->
				<view id="item1" class="tabbody">
					<view class="specialoffer bg-ff mar-top-20">
						<view class="wrap">
							<view class="fc-33 fs-32 pad-top-30">住客评价</view>
							<view class="so-wap">
								<view class="flex em-o1 jcsb">
									<view class="fs-36 fc-84 mar-right-10 flex-1">
										{{HotelDetail.hotelAvgScore}}分
										<text class="fc-84 fs-26" v-if="HotelDetail.hotelAvgScore >= 1">一般</text>
										<text class="fc-84 fs-26" v-if="HotelDetail.hotelAvgScore >= 2">好</text>
										<text class="fc-84 fs-26" v-if="HotelDetail.hotelAvgScore >= 4">很好</text>
										<text class="fc-84 fs-26" v-if="HotelDetail.hotelAvgScore >= 5">优秀</text>
									</view>
									<view class="flex jcc aic flex-1">
										<text class="mar-right-10 fs-24 fc-66 lin">共{{CommentlList.length || 0}}条&nbsp;|&nbsp;</text>
									</view>
									<view class="jtnr flex aic jcsb flex-3">									
										<text class="fs-24 fc-33">卫生{{avgHygieneStar}}&nbsp;</text>
										<text class="fs-24 fc-33">环境{{avgLocationStar}}&nbsp;</text>
										<text class="fs-24 fc-33">服务{{avgServiceStar}}&nbsp;</text>
										<text class="fs-24 fc-33">设施{{avgDeviceStar}}&nbsp;</text>
									</view>
								</view>
								<view class="flex tags-wap">
									<view class="tags fs-24">环境优美（{{beatiful || 0}}）</view>
									<view class="tags fs-24">性价比高（{{performance || 0}}）</view>
									<view class="tags fs-24">房间很大（{{large || 0}}）</view>
								</view>
								<view class="evalu-main" v-for="(item,index) in CommentlList" :key="index">
									<view class="ev-info">
										<view class="ev-info-l flex">
											<view class="user-img">
												<image :src="item.userIcon"></image>
											</view>
											<text class="fc-33 fs-32 mar-left-30">{{item.userNickname}}</text>
										</view>
										<view class="ev-title fs-26 fc-33">
											<rich-text :nodes="description.replace(/\<img/gi, '<img style=max-width:100%;height:auto')"></rich-text>
											{{item.content}}
										</view>
									</view>
								</view>
								<!-- <view class="lookall fs-32" @click="moreCommentlist">全部真实评价（0）</view> -->
							</view>
						</view>
					</view>
				</view>
				<!-- 订房必读 -->
				<view id="item2" class="tabbody">
					<view class="specialoffer bg-ff mar-top-20">
						<view class="wrap">
							<view class="fc-33 fs-32 pad-top-30">订房必读</view>
							<view class="so-wap">
								<view class="notice-main">
									<view class="fs-26 fc-33 pad-top-10">重要须知：</view>
									<view class="fs-26 fc-66 pad-top-10">根据酒店通知，防疫期间，来自及途经中高风险地区、行程码带星号的善人无法接待，请在下单前与酒店确认接待政策，
									以免影响您的入住。(提示有效2022/01/26起)</view>
									<view class="fs-26 fc-33 pad-top-10">酒店政策：</view>
									<view class="fs-26 fc-66 pad-top-10">酒店允许携带儿童入住。</view>
									<view class="fs-26 fc-66">4岁及以上客人按成人收费。</view>
								</view>
								<view class="lookall fs-32">全部重要提示</view>
							</view>
						</view>
					</view>	
				</view>
				
			</view>				
		</view>		
	</view>
</template>

<script>
	// 引入腾讯地图jssdk文件
	import  QQMapWX from "@/static/js/qqmap-wx-jssdk.min.js"
	import uniPopup from '@/components/uni-popups/uni-popup.vue';
	import {mapState,mapGetters} from 'vuex';//位置授权
	import config from "@/config/index.config.js";
	export default {
		components: {uniPopup},
		computed: {
			...mapState(["addressInfo"]),
			...mapGetters(['isLocation'])
		},
		data() {
			return {
				topBarHeight: 0, //状态栏加导航栏高度
				stateBarHeight: 0, //导航栏高度
				tabBarHeight: 50, //状态栏高度
				//顶部数据
				navbarData:{
					title:'酒店',
					src:''
				},
				className:'',
				hotelSubId:'',
				barFixed: true,
				barHeight: "44",
				hotelTitle:'',//酒店名字
				HotelDetail:'',//酒店详情
				roomInfos: [],//房间信息
				roomdetail:'',//房间详细信息
				content:'',//富文本
				description:'',//富文本
				barId: "0",
				reserveType:'',//酒店类型人才和公寓				
				current: 0,
				swiperCurrent: 0,
				startTime:'',//开始时间
				endTime:'',//结束时间
				dayCount:'',//住宿时间
				weekstart:'',//周几开始
				weekend:'',//周几结束
				freeRoomCount:'',//房间数
				imgSrc :'xinx.png',
				CommentlList:'',//评价列表
				isAuth:'',//是否入驻N-Y
				hotelSubLongitude:'',
				hotelSubLatitude:'‘',
				hotelImgPath:[]
			}
		},
		onLoad(option) {
			this.hotelSubId = option.hotelSubId;
			this.reserveType = option.type; // 查询类型 1-酒店 2-人才
			this.startTime = option.startTime//开始时间
			this.endTime = option.endTime//结束时间
			this.dayCount= option.dayCount//住宿时间
			this.weekstart = option.weekstart
			this.weekend = option.weekend
			this.$store.dispatch('getCity')//获取当前位置	
		/* onPageScroll: function(e) {
			this.$refs.barTabNav._selectedTab(e.scrollTop);			
		},
		 */
			this.isAuth = uni.getStorageSync('isAuth')
		},
		computed: {
			avgHygieneStar() {
				var totalStar = 0;
				if(this.CommentlList && this.CommentlList.length > 0) {
					this.CommentlList.forEach((r) => totalStar += Number(r.hygieneStar))
					return Math.floor( totalStar / this.CommentlList.length);
				}
				return 0;
			},
			avgLocationStar() {
				var totalStar = 0;
				if(this.CommentlList && this.CommentlList.length > 0) {
					this.CommentlList.forEach((r) => totalStar += Number(r.locationStar))
					return Math.floor( totalStar / this.CommentlList.length);
				}
				return 0;
			},
			avgServiceStar() {
				var totalStar = 0;
				if(this.CommentlList && this.CommentlList.length > 0) {
					this.CommentlList.forEach((r) => totalStar += Number(r.serviceStar))
					return Math.floor( totalStar / this.CommentlList.length);
				}
				return 0;
			},
			avgDeviceStar() {
				var totalStar = 0;
				if(this.CommentlList && this.CommentlList.length > 0) {
					this.CommentlList.forEach((r) => totalStar += Number(r.deviceStar))
					return Math.floor( totalStar / this.CommentlList.length);
				}
				return 0;
			},
			beatiful() {
				var count = 0;
				if(this.CommentlList && this.CommentlList.length > 0) {
					this.CommentlList.forEach((r) => {
						if(r.deviceStar >= 4) {
							count += Number(r.hygieneStar)
						}
					})
					return count;
				}
				return 0;
			},
			performance() {
				var count = 0;
				if(this.CommentlList && this.CommentlList.length > 0) {
					this.CommentlList.forEach((r) => {
						if(r.serviceStar >= 4) {
							count += Number(r.serviceStar)
						}
					})
					return count;
				}
				return 0;
			},
			large() {
				var count = 0;
				if(this.CommentlList && this.CommentlList.length > 0) {
					this.CommentlList.forEach((r) => {
						if(r.deviceStar >= 4) {
							count += Number(r.deviceStar)
						}
						if(r.locationStar >= 4) {
							count += Number(r.locationStar)
						}
					})
					return count;
				}
				return 0;
			},
			
		},
		//导航
		mounted: function() {
			var self = this;
			uni.getSystemInfo({
				success: function(res) {
					self.stateBarHeight = res.statusBarHeight
					// #ifdef MP-WEIXIN
					let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
					let paddingSize = menuButtonInfo.top - self.stateBarHeight
					self.tabBarHeight = (menuButtonInfo.bottom - self.stateBarHeight) + paddingSize
					self.topBarHeight = menuButtonInfo.bottom + paddingSize
					// #endif
					
					// #ifdef APP-NVUE || APP-PLUS 
					let menuRect = wx.getMenuButtonBoundingClientRect()
					self.topBarHeight = menuRect.top + menuRect.height
					// #endif
					
				},
			})
			this.getHotelDetail()
			this.getCommentlList()
		},
		//滚动大于20px固定到顶部的距离
		onPageScroll(e){			
			if(e.scrollTop>20){
				this.className = 'sfixed';
			}else{
				this.className = '';
			}
		},
		methods:{			
			//顶部返回
			gotoBack(){
				uni.navigateBack({
					url:"/pages/index/index"
				})
			},
			//获取酒店详情
			getHotelDetail() {
				var that = this
				uni.request({
					url:config.baseUrl+'hotel/sub/'+this.hotelSubId,
					success(res){
						if(res.data.code == 200){								
							res.data.data.hotelSubCreateTime = res.data.data.hotelSubCreateTime.slice(0,10)
							res.data.data.tabs = res.data.data.tabs.split(",");//逗号是分隔符							
							that.freeRoomCount = res.data.data.freeRoomCount;
							that.HotelDetail = res.data.data;
							that.hotelImgPath = res.data.data.hotelImgPath.split(",");
							that.hotelTitle = that.HotelDetail.hotel.hotelFullName;
							that.hotelSubLongitude = res.data.data.hotelSubLongitude;
							that.hotelSubLatitude = res.data.data.hotelSubLatitude;
							console.log(res.data.data.roomInfos)
							// 根据type过滤
							if(that.reserveType == 2) {
								res.data.data.roomInfos = res.data.data.roomInfos.filter(room => room.isUserAuth == 'Y')
							} else if(that.reserveType == 1) {
								res.data.data.roomInfos = res.data.data.roomInfos.filter(room => room.isUserAuth == 'N')
							}
							for(var i=0;i<res.data.data.roomInfos.length;i++){
								res.data.data.roomInfos[i].tabs= res.data.data.roomInfos[i].tabs.split(",");//逗号是分隔符
								res.data.data.roomInfos[i].hotelRoomImgPath= res.data.data.roomInfos[i].hotelRoomImgPath.split(",");//逗号是分隔符
							}
							that.roomInfos = res.data.data.roomInfos							
						}
					}
				})
			},
			//获取评价列表			
			async getCommentlList() {
				var that = this
				var param = {
					product_id: this.hotelSubId
				}
				var res = await this.$apis.getCommentlList(param);
				if(res){
					for(var i=0;i<res.rows.length;i++){
						res.rows[i].content = that.formatRichText(res.rows[i].content)	
					}
					that.CommentlList = res.rows
				}
			},
			//富文本编译修改
			formatRichText(html) {
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi,
						'width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi, '<img  class="img" ');
				newContent = newContent.replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
					.replace(/<p>/ig, '<p class="u-css-clss">')
				return newContent;
			},
			//导航
			toMap() {
				console.log('地图导航')
				console.log('this.HotelDetail',this.HotelDetail)
				let plugin = requirePlugin('routePlan');
				let key = 'TCXBZ-OWLC3-77E3S-YQH4Z-L7FQQ-WUBID';  //使用在腾讯位置服务申请的key
				let referer = '宿求直聘';   //调用插件的app的名称
				let endPoint = JSON.stringify({  //终点
				  'name': this.HotelDetail.hotelSubName,
				  'latitude': this.HotelDetail.hotelSubLatitude,
				  'longitude': this.HotelDetail.hotelSubLongitude
				});
				console.log('endPoint',endPoint)
				wx.navigateTo({
				  url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
				});
				console.log("地图");
					let latitude=this.hotelSubLatitude;
					let longitude=this.hotelSubLongitude;
				uni.openLocation({
					latitude: parseFloat(latitude),
					longitude: parseFloat(longitude),
					success: function() {
						console.log('success');
					}
				});
			},
			//去选择时间
			toChoicebar(){},
			//房间详情弹窗
			downDetail(hotelRoomId){
				var that = this
				this.$refs.popup.open();
				for(var i=0;i<that.roomInfos.length;i++){
					if(hotelRoomId == that.roomInfos[i].hotelRoomId){
						that.roomdetail = that.roomInfos[i]
					}
					this.content = that.roomdetail.content
					this.description = that.formatRichText(this.content)
				}
			},
			//轮播图指示器
			swiperChange (e) {
				this.swiperCurrent = e.detail.current
			},
			//立即预定
		 async goReserve(hotelRoomId,hotelRoomNo,hotelRoomName,hotelRoomRemark,promotionPrice,count,isUserAuth){	
				var that = this;
				var openid = uni.getStorageSync('openid');
				if(openid == "" || openid == undefined){
					uni.navigateTo({
						url:'/pages/login/login'
					})
					return;
				} 
				if(that.reserveType == 2){
					if(count != 0){	//判断是否有空房间		
						let res= await this.$apis.getAuthInfo({
							wxuserId:uni.getStorageSync('wxuser_id'),
							pageNum: 1,
							pageSize: 10,
						});
						if(res.code == 200){
							if(res.rows.length>0){
								this.authData = res.rows[0]
								uni.setStorageSync('auditStatus', this.authData.auditStatus);//存储认证状态
							}					
						}
						//根据isAuth判断是否入驻
						if(uni.getStorageSync('isAuth') == 'Y'){
							uni.navigateTo({
								url:'/pages/hotel/order?startTime='+this.startTime+"&endTime=" + this.endTime+"&dayCount=" + this.dayCount+"&weekstart=" + this.weekstart+"&weekend=" + this.weekend+'&hotelRoomId='
								+hotelRoomId+'&hotelRoomNo='+hotelRoomNo+'&hotelRoomName='+hotelRoomName+'&hotelRoomRemark='+hotelRoomRemark+'&hotelTitle='+that.hotelTitle+'&promotionPrice='+promotionPrice+'&hotelSubId='+this.hotelSubId + '&isUserAuth=' + isUserAuth 
							})
						}else{						
							uni.showModal({
								title: '提示',
								content: '入住人才公寓需要人才认证，是否前往人才认证',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url:'/pages/user/person/talentauth'
										})					
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}	
					}else{
						uni.showModal({
							title: '提示',
							content: '该类型的房间已经订完，请选择其他类型的房间',
							success: function(res) {
								if (res.confirm) {
											
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});						
					}
				} else{
					if(count !=0) {
						uni.navigateTo({
							url:'/pages/hotel/order?startTime='+this.startTime+"&endTime=" + this.endTime+"&dayCount=" + this.dayCount+"&weekstart=" + this.weekstart+"&weekend=" + this.weekend+'&hotelRoomId='
							+hotelRoomId+'&hotelRoomNo='+hotelRoomNo+'&hotelRoomName='+hotelRoomName+'&hotelRoomRemark='+hotelRoomRemark+'&hotelTitle='+that.hotelTitle+'&promotionPrice='+promotionPrice+'&hotelSubId='+this.hotelSubId  + '&isUserAuth=' + isUserAuth 
						})
					} else {
						uni.showModal({
							title: '提示',
							content: '该类型的房间已经订完，请选择其他类型的房间',
							success: function(res) {
								if (res.confirm) {									
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}					
				}
			},
			//查看更多评价
			moreCommentlist(){
				uni.navigateTo({
					url:'/pages/hotel/hotel-comment'
				})
			},
			//图片配置域名
			getImgUrl(icon){
			   return this.$mConfig.imgSrcUrl+icon;
			},
		}
	}
</script>

<style lang="scss">
	.sfixed{
		background: #84C0F4;
		width: 100%;
		position: fixed;
		z-index: 10;
		top: 0;
		height: 94px;
		left: 0;
		right: 0;
		.top_bgimg{
			.top_cont{
				position: relative;
			}
		}		
	}
	/* 内容 */
	.main-hotel{
		position: relative;
		top: 360rpx;
		z-index: 2;
		background: #f6f6f6;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40px;
		.jd-info{
			min-height: 336rpx;
			background: #FFFFFF;
			border-radius: 45rpx;		
			.wrap{
				padding-bottom: 40rpx;
				.one-col{
					padding: 20rpx 0 10rpx;
					.starts{
						margin: 8rpx 10rpx;
						image{
							width: 36rpx;
							height: 32rpx;
							display: block;
							margin: 0 3rpx;
						}
					}
				}
				.fw{
					text{
						color: #666;
						font-size: 24rpx;
						display: inline-block;
						margin: 0 10rpx 0 0;
					}
					.more{
						color: #84C0F4;
					}
				}
				.two-col{
					.t-c-l{
						width: 38%;
						height: 150rpx;
						background: linear-gradient(225deg, #FFF7E8 0%, #D6ECFF 100%);
						border-radius: 16rpx;
						.t-c-l-top{
							padding: 22rpx 12rpx 10rpx;
							.pf{
								width: 56rpx;
								height: 36rpx;
								background: #84C0F4;
								line-height: 36rpx;
								text-align: center;
								padding-right: 4rpx;
							}
							image{
								width: 8rpx;
								height: 16rpx;
								display: block;
								position: relative;
								top: 4px;
								right: -8px;
							}
						}
					}
					.t-c-r{
						width: 60%;
						height: 150rpx;
						background: linear-gradient(219deg, #FFF7E8 0%, #D6ECFF 100%);
						border-radius: 16rpx;
						.lc{
							width: 80%;
							padding: 26rpx 0rpx 0 18rpx;
						}
						.lc-img{
							line-height: 115rpx;
							text{
								left: -4px;
								position: relative;
							}
							image{
								width: 44rpx;
								height: 44rpx;
								display: block;
								position: relative;
								top: 26rpx;
							}
						}
						
					}
				}
			}
		}
		.choice-bar{
			margin:20rpx 0;
			background: #fff;
			height: 92rpx;
			// 头部操作区域
			.navTop {
				position: relative;
				display: flex;
				align-items: center;
				justify-content:space-evenly;				
				width: 100%;
				// 取消按钮
				.cancel {
					font-size: 28rpx;
					z-index: 10;
				}
			
				// 标题
				.title {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					font-size: 32rpx;
					line-height: 80rpx;
					text-align: center;
			
				}				
				.navTopstar1{
					margin-left: 33rpx;					
				}
				.name{				
					font-size:28rpx;
					line-height: 92rpx;
					margin-bottom:10rpx ;					
					color: #333333;
				}
				.name1{
					font-size: 28rpx;
					color: #999999;
				}
				.name2{
					font-size: 28rpx;
					color: #333333;
					margin-top: 15rpx;
					margin-left: 28rpx;
					line-height: 60rpx;
				}
				.navTopxianview{
					width:80rpx;
					margin-left: 33rpx;
					.navTopxianname{						
						width: 100%;
						height: 34rpx;						
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: CENTER;
						color: #ffa100;
						margin-bottom: 9rpx;
						
					}
					.navTopxian{						
						width: 80rpx;
						height: 1rpx;
						background-color: #ffa100;
					}						
				}
				
			}
		}
		.tabbody {
			position: relative;
			width: 100%;
			border-bottom: 3px solid #4CD964;
		}
		.sticky{
			position: -webkit-sticky;
			position: sticky;
			top: 144rpx;
			height: 90rpx;
			background-color: #cae8ca;
			z-index: 20;
		}
		.specialoffer{
			.wrap{
				padding-bottom: 40rpx;
				.so-wap{
					.items{
						border-bottom: 1px solid #eaeaea;
						padding: 30rpx 0;
						.backicon{
							width: 16rpx;
							height: 32rpx;
							display: block;
							position: relative;
							top: 18rpx;
						}
						.hotel-pic{
							width:168rpx;
							height: 218rpx;
							display: flex;
							align-items: center;
							overflow: hidden;
							position: relative;
							margin-right: 15rpx;
							border-radius: 8rpx;
							image{
								width: 100%;
							}
							.anglemark{
								min-width: 105rpx;
								height: 36rpx;
								background: linear-gradient(270deg, #F8B83A 0%, #FFE7B7 100%);
								border-radius: 12rpx 54rpx 54rpx 0px;
								color: #785919;
								line-height: 36rpx;
								text-align: center;
								font-size: 22rpx;
								position: absolute;
								top: 0;
								left: 0;
							}
							.smallhorn{
								position: absolute;
								bottom: 0;
								left: 0;
								width: 35rpx;
								height:30rpx;
								line-height: 30rpx;
								text-align: center;
								background: #000000ad;
								border-radius: 0px 0px 0px 12rpx;
							}
						}
						.h-label{
							text{
								padding: 0 8rpx 0 0;
								display: inline-block;
								font-size: 26rpx;
								color: #333;
							}
						}
						.explains{
							padding:16rpx 0;
							.tjf{
								width: 126rpx;
								height:35rpx;
								border-radius:4rpx;
								line-height: 35rpx;
								text-align: center;
								color: #F1AF2A;
								font-size: 24rpx;
								border: 1px solid #F1AF2A;
							}
							line-height:35rpx;
						}
						.ification{
							margin-right: 10rpx;
							image{
								width: 26rpx;
								height: 24rpx;
								display: block;
								position: relative;
								top: 3px;
								margin-right: 8rpx;
							}
						}
						.yd-info{
							.prices{
								.banjia{
									width:108rpx;
									height: 36rpx;
									background: #84C0F4;
									line-height: 36rpx;
									text-align: center;
									color: #fff;
									border-radius: 20rpx;
								}
								.line{
									text-decoration: line-through;
								}
							}
							.yud{
								width: 76rpx;
								height: 80rpx;
								padding-top: 4rpx;
								background: #84C0F4;
								border-radius: 8rpx;
								text-align: center;								
							}
						}
					}
					.item:last-child{
						border-bottom: none;
					}
					.lookall{
						width:410rpx;
						height:70rpx;
						margin: 20rpx auto;
						background: rgba(132, 192, 244, 0.14901960784313725);
						border-radius: 36rpx;
						line-height: 70rpx;
						text-align: center;
						color: #5C9DD6;
					}
					/* 评价 */
					.em-o1{
						line-height: 60rpx;
						.jtnr{
							position: relative;								
						}							
					}
					.tags-wap{
						margin: 15rpx 0;
						.tags{
							min-width: 118rpx;
							height:36rpx;
							background: #F0F8FE;
							margin-right: 26rpx;
							text-align: center;
							line-height: 36rpx;
							color: #5C9DD6;
						}
					}
					.evalu-main{
						.ev-info{
							margin-top: 30rpx;
							.ev-info-l{
								.user-img{
									width: 48rpx;
									height: 48rpx;
									display: flex;
									align-items: center;
									overflow: hidden;
									position: relative;
									border-radius: 50%;
									image{
										width: 100%;
										border-radius: 50%;
									}
								}
							}
							.ev-title{
								padding-top: 10rpx;
								line-height: 43rpx;
								word-break: break-all;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 4;
								-webkit-box-orient: vertical;
							}
						}
						.notice-main{
							
						}
					}
				}
			}			
		}
	}
	.mask-content{
		min-height: 65vh;
		max-height: 100vh;
		overflow-y: auto;
		
		/* 轮播 */
		.swiper-view {
			position: relative;
			.swiper {
				width: 100%;
				height: 380rpx;
				image {
					width: 100%;
					height: 380rpx;
					
				}
			}
			.dot-s{
				position: absolute;
				bottom: 10rpx;
				display: flex;
				justify-content: center;
				height: 15upx;
				width: 100%;
				.baner-dian{
					width: 12rpx;
					height: 8rpx;
					background-color: #fff;
					border-radius: 22rpx;
					margin:0 4rpx;
					&.on {
						width: 30rpx;
						background-color:#84C0F4;
					}
				}
			}
		}
		.detail-mian{
			.wrap{
				padding-bottom: 0;
				.details-wap{
					margin:24rpx 0;
					.d-w1{
						max-width: 300rpx;
						min-width: 160rpx;
						image{
							width: 26rpx;
							height: 24rpx;
							display: block;
							position: relative;
							top: 3px;
							margin-right: 8rpx;
						}
					}
					.d-w2{
						width: 100%;
						margin: 20rpx 0;
						.r-text{
							margin-left: 24rpx;
							font-size: 24rpx;
							line-height: 36rpx;
						}
					}
				}
			}
			.order-footer{
				height:100rpx;
				background: #fff;
				position: fixed;
				bottom: 0;
				width: 100%;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);				
				.foot{
					padding:0 32rpx;
				}
				.prices{
					.banjia{
						width:108rpx;
						height: 36rpx;
						background: #84C0F4;
						line-height: 36rpx;
						text-align: center;
						color: #fff;
						border-radius: 20rpx;
					}
					.line{
						text-decoration: line-through;
					}
				}
				.sub-btn{
					width: 334rpx;
					height: 80rpx;
					background: #84C0F4;
					line-height: 80rpx;
					text-align: center;
					color: #fff;
					margin-top: 10rpx;
				}
			}
		}
	}
	.pad-bot-100{
		padding-bottom: 100rpx;
	}
</style>
